<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./jquery.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="./bootstrap-3.4.1/dist/css/bootstrap.css" />
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="./bootstrap-3.4.1/dist/js/bootstrap.js"></script>
</head>
<style>
    .table {
        width: 800px;
        margin: auto;
        margin-top: 50px;
    }

    th,
    td {
        text-align: center;
    }
</style>

<body>
    <table class="table table-bordered">
        <thead>
            <tr>
                <th><input type="checkbox" id="all" /></th>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>商品数量</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <div style="width: 100%; text-align: center; font-size: 22px; margin-top: 20px">
        <p>总价：<span>0</span>￥</p>
    </div>
</body>
<script>
    var goods = [
        {
            status: false,
            name: '苹果',
            price: '10',
            num: 0,
        },
        {
            status: false,
            name: '香蕉',
            price: '10',
            num: 0,
        },
        {
            status: false,
            name: '榴莲',
            price: '10',
            num: 0,
        },
        {
            status: false,
            name: '葡萄',
            price: '10',
            num: 0,
        },
    ]
    //页面加载
    $(function () {
        //显示购物车列表
        showShopCarList()
        countPrice()
        //全选
        $('#all').click(function () {
            $('tbody input').prop('checked', $(this).prop('checked'))

            for (let i in goods) {
                goods[i].status = $(this).prop('checked')
            }
            saveData()
            countPrice()
        })
        $('tbody ').on('change', function () {
            var index = $(event.target).attr('data-id')
            if ($(event.target).attr('type') == 'number') {
                var num = $(event.target).val()
                goods[index].num = num
            } else {
                //复选改变时 要存一下当前状态
                goods[index].status = $(event.target).prop('checked')
            }
            saveData()
            countPrice()
        })
    })
    //统计价格
    function countPrice() {
        var total = 0
        $('tbody input:checkbox').each(function (index, item) {
            if ($(item).prop('checked')) {
                total += goods[index].price * goods[index].num
            }
        })
        $('div p span').html(total)
    }
    //显示购物车列表
    function showShopCarList() {
        //获取本地存储数据
        goods = localStorage.getItem('goods')
            ? JSON.parse(localStorage.getItem('goods'))
            : goods
        var strHtml = ''
        for (let i in goods) {
            var strBox = goods[i].status ? `checked` : ``
            strHtml += `
                <tr>
                    <td>
                        <input type="checkbox" class="check" ${strBox} data-id="${i}" />
                    </td>
                    <td>${goods[i].name}</td>
                    <td>${goods[i].price}</td>
                    <td>
                        <input type="button" value="-" onclick="updateNumDown(${i},this)" class="btn btn-default reduce" />
                        <input type="number" data-id="${i}" min="0"  style="width:50px" value="${goods[i].num}" class="num" />
                        <input type="button" value="+" onclick="updateNumUp(${i},this)" class="btn btn-default add" />
                    </td>
                </tr>
            `
        }
        $('tbody').html(strHtml)
    }
    //数量-- 或 ++
    function updateNumDown(index, obj) {
        if (goods[index].num == 0) {
            return
        }
        $(obj).next().val(--goods[index].num)
        countPrice()
        saveData()
    }
    function updateNumUp(index, obj) {
        $(obj).prev().val(++goods[index].num)
        countPrice()
        saveData()
    }
    //存储本地数据
    function saveData() {
        localStorage.setItem('goods', JSON.stringify(goods))
    }
</script>

</html>